<template>
  <div class="safeDistance" style="padding: 0 10rpx 0 20rpx">
    <div>
      <u-cell title="姓名" customClass="test ">
        <div class="needF" slot="icon">*</div>
        <u-input
          slot="right-icon"
          inputAlign="right"
          placeholder="请输入姓名"
          maxlength="12"
          border="none"
          v-model="personalInfo.name"
        ></u-input>
        <u-icon
          class="ml20r"
          slot="right-icon"
          name="edit-pen"
          v-if="type == 1"
          color="#A2A2A2"
          size="16"
        ></u-icon>
      </u-cell>
      <u-cell title="昵称" customClass="test ">
        <div class="needF" slot="icon">*</div>
        <u-input
          slot="right-icon"
          inputAlign="right"
          placeholder="请输入昵称"
          maxlength="12"
          border="none"
          v-model="personalInfo.nickName"
        ></u-input>
        <u-icon
          class="ml20r"
          slot="right-icon"
          name="edit-pen"
          v-if="type == 1"
          color="#A2A2A2"
          size="16"
        ></u-icon>
      </u-cell>
      <u-cell title="年龄" customClass="test ">
        <div class="needF" slot="icon">*</div>

        <u-input
          type="number"
          slot="right-icon"
          inputAlign="right"
          placeholder="请输入年龄"
          border="none"
          v-model="personalInfo.age"
        ></u-input>
        <u-icon
          class="ml20r"
          slot="right-icon"
          name="edit-pen"
          v-if="type == 1"
          color="#A2A2A2"
          size="16"
        ></u-icon>
      </u-cell>
      <u-cell @click="sexShow = true" title="性别" customClass="test ">
        <div class="needF" slot="icon">*</div>
        <u-input
          slot="right-icon"
          placeholder="请选择性别"
          inputAlign="right"
          border="none"
          :readonly="true"
          v-model="personalInfo.sexName"
        ></u-input>
        <u-icon
          class="ml20r"
          slot="right-icon"
          name="arrow-right"
          v-if="type == 1"
          color="#A2A2A2"
          size="16"
        ></u-icon>
      </u-cell>
      <u-cell title="手机号" customClass="test ">
        <div class="needF" slot="icon">*</div>
        <u-input
          type="number"
          slot="right-icon"
          inputAlign="right"
          placeholder="请输入手机号"
          border="none"
          :disabled="true"
          disabledColor="transparent"
          v-model="personalInfo.phonenumber"
        ></u-input>
        <!-- <u-icon
          class="ml20r"
          slot="right-icon"
          name="edit-pen"
          v-if="type == 1"
          color="#A2A2A2"
          size="16"
        ></u-icon> -->
      </u-cell>
      <u-cell title="身份证号" customClass="test">
        <u-input
          type="number"
          slot="right-icon"
          inputAlign="right"
          placeholder="请输入身份证号"
          border="none"
          v-model="personalInfo.identityNumber"
        ></u-input>
        <u-icon
          class="ml20r"
          slot="right-icon"
          name="edit-pen"
          v-if="type == 1"
          color="#A2A2A2"
          size="16"
        ></u-icon>
      </u-cell>
      <u-cell title="学校" customClass="test">
        <u-input
          slot="right-icon"
          inputAlign="right"
          placeholder="请输入学校"
          border="none"
          v-model="personalInfo.address"
        ></u-input>
        <u-icon
          class="ml20r"
          slot="right-icon"
          name="edit-pen"
          v-if="type == 1"
          color="#A2A2A2"
          size="16"
        ></u-icon>
      </u-cell>
      <u-cell @click="GameShow = true" title="学号" customClass="test">
        <u-input
          slot="right-icon"
          inputAlign="right"
          placeholder="请输入学号"
          border="none"
          :readonly="true"
          v-model="personalInfo.hobbyName"
        ></u-input>
        <u-icon
          class="ml20r"
          slot="right-icon"
          name="arrow-right"
          v-if="type == 1"
          color="#A2A2A2"
          size="16"
        ></u-icon>
      </u-cell>
      <div v-show="false"></div>
    </div>
    <u-picker
      :show="sexShow"
      :columns="sexColumns"
      @cancel="sexShow = false"
      @confirm="changeSex"
      keyName="label"
    ></u-picker>
    <!-- <u-action-sheet
      :closeOnClickOverlay="true"
      :actions="sexColumns"
      @select="changeSex"
      :show="sexShow"
    ></u-action-sheet> -->
    <u-picker
      :show="GameShow"
      :columns="GameColumns"
      keyName="label"
      @cancel="GameShow = false"
      @confirm="changeGame"
    ></u-picker>
    <div
      class="bgf fixed l0 r0 b0"
      style="padding: 20rpx 40rpx; box-shadow: 0px -5px 10px 0px #d6d7d9"
    >
      <div
        v-if="type == 2"
        class="f ac xc"
        @click="modify"
        style="
          width: 686rpx;
          height: 68rpx;
          background: #618de5;
          border-radius: 16rpx;
          color: #fff;
          letter-spacing: 15rpx;
        "
      >
        修改
      </div>
      <div
        v-else
        class="f ac xc"
        @click="submit"
        style="
          width: 686rpx;
          height: 68rpx;
          background: #618de5;
          border-radius: 16rpx;
          color: #fff;
          letter-spacing: 15rpx;
        "
      >
        保存
      </div>
    </div>
  </div>
</template>

<script>
// import { getcustomerInfo, updatecustomerInfo } from "@/api/mine";
// import { getDicts } from "@/api/system/dict/data";

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  name: "",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      personalInfo: {
        name: "",
        nickName: "",
        phonenumber: "",
        age: 0,
        sex: "",
        identityNumber: "",
        address: "",
        hobbyName: "",
        hobby: 1,
      },
      type: 2,
      sexShow: false,
      sexColumns: [
        [
          {
            label: "男",
            id: 0,
          },
          {
            label: "女",
            id: 1,
          },
        ],
      ],
      GameShow: false,
      GameColumns: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async onLoad() {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    // await this.getGameColumns();
    // await this.getcustomerInfo(this.$store.state.user.userId);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    getcustomerInfo(id) {
      getcustomerInfo(id).then(({ data }) => {
        // let hobbyName = this.personalInfo.hobbyName;
        this.personalInfo = {
          ...data,
          sexName: data.sex == 0 ? "男" : data.sex == 1 ? "女" : "未知",
        };
        this.GameColumns[0].forEach((item) => {
          console.log(item.id == data.hobby);
          if (item.id == data.hobby) {
            this.personalInfo.hobbyName = item.label;
          }
        });
      });
    },
    async getGameColumns() {
      const { data } = await getDicts("hobby_type");
      await this.GameColumns.push(
        data.map((item) => {
          return {
            label: item.dictLabel,
            id: item.dictValue,
          };
        })
      );
    },
    changeSex({ value }) {
      this.personalInfo.sexName = value[0].label;
      this.personalInfo.sex = value[0].id;
      this.sexShow = false;
    },
    changeGame({ value }) {
      this.personalInfo.hobbyName = value[0].label;
      this.personalInfo.hobby = value[0].id;
      this.GameShow = false;
    },
    modify() {
      this.type = 1;
    },
    async submit() {
      const { name, phonenumber, age, sex, identityNumber, nickName } =
        this.personalInfo;
      if (!name || !nickName || !phonenumber || age === "" || sex === "") {
        uni.showToast({
          title: "请填写完整！",
          icon: "error",
        });
        return;
      }
      const isIdentity = (val) =>
        /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
          val
        );
      if (identityNumber !== "" && !isIdentity(identityNumber)) {
        uni.showToast({
          title: "身份证信息错误",
          icon: "error",
        });
        return;
      }
      await updatecustomerInfo({
        ...this.personalInfo,
      });
      this.$store.dispatch("UpdateInfo");
      uni.navigateBack();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep.u-input--radius .u-input--square {
  background-color: transparent !important;
}
::v-deep .u-reset-button {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

::v-deep .u-cell__body {
  padding: 27rpx 30rpx !important;
}
::v-deep .u-button {
  height: 80rpx !important;
}
::v-deep .test {
  position: relative;
}
::v-deep .test::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  width: 93%;
  background-color: #eee;
  margin: 0 auto;
}
::v-deep .test:last-child::after {
  display: none;
}
::v-deep .u-cell__title-text {
  letter-spacing: 3rpx;
  font-size: 30rpx !important;
  font-weight: bold;
  margin: 10rpx 0;
}
.needF {
  display: inline-block;
  margin-right: 4rpx;
  margin-left: -20rpx;
  line-height: 1;
  font-family: SimSun;
  font-size: 30rpx;
  color: #ed4014;
}
.disableF {
  pointer-events: none;
}
.disableF ::v-deep .u-cell__right-icon-wrap {
  opacity: 0.5;
}
.disableF:hover {
  cursor: no-drop;
}
::v-deep .u-cell__right-icon-wrap {
  flex: 1;
}
::v-deep uni-view {
  justify-content: right;
  background: #fff;
}
::v-deep .u-line {
  display: none;
}
::v-deep .u-cell__right-icon-wrap {
  justify-content: flex-end;
}
</style>

<style></style>
